<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <!-- 图标组件库 -->
    <link rel="stylesheet" th:href="@{//at.alicdn.com/t/c/font_3701801_12u2357o4ba.css}">
    <link rel="stylesheet" th:href="@{/css/sidebar.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">
</head>
<body>
    <nav class="sidebar close">
        <header>
            <div class="user-info">
                <span class="image">
                    <img th:src="@{/img/tx.JPG}" alt="">
                </span>
                <div class="text nickname">
                    <span class="name">[[${session.name}]]</span>
                    <span class="identity" th:text="${session.identity}">图书管理员</span>
                </div>
            </div>

            <i class="toggle iconfont icon-xiangyou1"></i>
        </header>

        <div class="menu-bar">
            <div class="menu">

                <ul class="menu-links">
                    <li class="nav-link">
                        <a th:href="@{/admin/home}">
                            <i class="iconfont icon-home icon"></i>
                            <span class="text nav-text">回到主页</span>
                        </a>
                    </li>
                    <li class="nav-link">
                        <a th:href="@{/admin/userManage}">
                            <i class="iconfont icon-yonghuguanli icon"></i>
                            <span class="text nav-text">用户管理</span>
                        </a>
                    </li>
                    <li class="nav-link">
                        <a th:href="@{/admin/bookManage}">
                            <i class="icon iconfont icon-tubiaozhizuomoban-37"></i>
                            <span class="text nav-text">图书管理</span>
                        </a>
                    </li>
                    <li class="nav-link">
                        <a th:href="@{/admin/problemManage}">
                            <i class="icon iconfont icon-guizeguanli"></i>
                            <span class="text nav-text">反馈管理</span>
                        </a>
                    </li>
                    <li class="nav-link">
                        <a th:href="@{/admin/approval}">
                            <i class="icon iconfont icon-shenpijieyue"></i>
                            <span class="text nav-text">审批借阅</span>
                        </a>
                    </li>
                    <li class="nav-link">
                        <a th:href="@{/admin/adminManage}">
                            <i class="iconfont icon icon-guanliyuan"></i>
                            <span class="text nav-text">管理员管理</span>
                        </a>
                    </li>
                    <li class="nav-link">
                        <a href="#">
                            <i class=" icon iconfont icon-aixin1"></i>
                            <span class="text nav-text">特别关心</span>
                        </a>
                    </li>
                    <li class="nav-link">
                        <a th:href="@{/admin/music}">
                            <i class="icon iconfont icon-yinle"></i>
                            <span class="text nav-text">音乐</span>
                        </a>
                    </li>
                    
                </ul>
            </div>

            <div class="bottom-content">
                <li>
                    <a th:href="@{/logout}">
                        <i class="icon iconfont icon-tuichu"></i>
                        <span class="text nav-text">退出登录</span>
                    </a>
                </li>
                <li class="mode">
                    <div class="sun-moon">
                        <i class="icon iconfont icon-a-icon_wananyueliangshuimian moon"></i>
                        <i class="icon iconfont icon-taiyang-copy sun"></i>
                    </div>
                    <span class="mode-text text">夜间模式</span>
                    <div class="toggle-switch">
                        <span class="switch"></span>
                    </div>                    
                </li>
            </div>
        </div>
    </nav>

    <section class="home">
        <div class="topBar">
            <h1>欢迎使用图书后台管理系统</h1>
        </div>
        <div class="main">
            <h3>系统概要信息</h3>
            <div class="AllMsg">

                <table class="bookMsg">
                    <tr>
                        <th colspan="2">图书信息</th>
                    </tr>
                    <tr>
                        <td>图书数量</td>
                        <td>[[${booksTypeNum}]]</td>
                    </tr>
                    <tr>
                        <td>库存数量</td>
                        <td>[[${allNum}]]</td>
                    </tr>
                    <tr>
                        <td>已借数量</td>
                        <td>[[${borrowNum}]]</td>
                    </tr>
                </table>
                <table class="userMsg">
                    <tr>
                        <th colspan="2">用户信息</th>
                    </tr>
                    <tr>
                        <td>用户数量</td>
                        <td>[[${AllUsersNum}]]</td>
                    </tr>
                    <tr>
                        <td>超级管理员数量</td>
                        <td>[[${superAdminNum}]]</td>
                    </tr>
                    <tr>
                        <td>普通管理员数量</td>
                        <td>[[${adminNum}]]</td>
                    </tr>
                    <tr>
                        <td>读者用户数量</td>
                        <td>[[${usersNum}]]</td>
                    </tr>
                </table>
            </div>
        </div>
    </section>


    
    <script th:src="@{/script/sidebar.js}"></script>
</body>
</html>